<template>
  <div>
    <r-search :searchForm="searchForm" :searchData="searchData" />
    <div class="pw100 flex_aj mb20">
      <div class="mbox bg_1">
        <p>Total Amount Credited</p>
        <p>{{ MoneyData.insum }}元</p>
      </div>
      <div class="mbox bg_2">
        <p>出账总Money</p>
        <p>{{ MoneyData.outsum }}元</p>
      </div>
    </div>
    <r-search
      :searchForm="searchForm2"
      :searchHandle="searchHandle"
      :searchData="searchData2"
    />
    <r-table
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="tablePage"
      @refresh="init()"
    ></r-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      MoneyData: {
        insum: "",
        outsum: ""
      },
      searchData: {
        yam: ""
      },
      searchForm: [
        {
          type: "dateMonth",
          prop: "yam",
          change: e => this.dateChange(e)
        }
      ],
      searchData2: {
        orderId: "",
        name: "",
        orderType: "",
        etime: ""
      },
      searchForm2: [
        {
          type: "input",
          prop: "orderId",
          placeholder: "Order Nnumber",
          width: 150
        },
        {
          type: "input",
          prop: "name",
          placeholder: "Transaction Party",
          width: 150
        },
        {
          type: "select",
          prop: "orderType",
          placeholder: "交易Type",
          width: 150,
          options: [
            {
              label: "生鲜柜订单",
              value: "1"
            },
            {
              label: "自提柜订单",
              value: "2"
            },
            {
              label: "送货上门订单",
              value: "3"
            },
            {
              label: "售袋订单",
              value: "4"
            },
            {
              label: "售卡订单",
              value: "5"
            },
            {
              label: "IC卡Recharge Orders",
              value: "6"
            },
            {
              label: "退款",
              value: "7"
            },
            {
              label: "提现",
              value: "8"
            }
          ]
        },
        {
          type: "date",
          prop: "etime",
          placeholder: "Transaction Time",
          width: 170
        }
      ],
      searchHandle: [
        {
          label: "Search",
          type: "success",
          icon: "el-icon-search",
          handle: e => this.init()
        },
        {
          label: "Reset",
          icon: "el-icon-refresh-right",
          handle: e => this.searchFromReset2()
        },
        {
          label: "ExportExcel",
          icon: "el-icon-download",
          type: "success",
          loading: false,
          handle: that => this.handleDownload()
        }
      ],
      tableData: [],
      tableCols: [
        {
          label: "Order Nnumber",
          prop: "orderId"
          // theme: e => e.status ? 'primary' : 'danger', type: "tag",
        },
        {
          label: "交易Type",
          prop: "orderType",
          formatter: e =>
            e.orderType == 1
              ? "生鲜柜订单"
              : e.orderType == 2
              ? "自提柜订单"
              : e.orderType == 3
              ? "送货上门订单"
              : e.orderType == 4
              ? "售袋订单"
              : e.orderType == 5
              ? "售卡订单"
              : e.orderType == 6
              ? "C卡Recharge Orders"
              : e.orderType == 7
              ? "退款"
              : e.orderType == 8
              ? "提现"
              : ""
        },
        {
          label: "Transaction Party",
          prop: "name"
        },
        {
          label: "Transaction Amount",
          prop: "bonus",
          formatter: e =>
            e.bonusType == 1
              ? "-" + e.bonus
              : e.bonusType == 2
              ? "+" + e.bonus
              : ""
        },
        {
          label: "Transaction Method",
          prop: "type",
          formatter: e =>
            e.type == 1
              ? "未知"
              : e.type == 2
              ? "WeChat公众号Payment"
              : e.type == 3
              ? "WeChat公众号免密Payment"
              : e.type == 4
              ? "WeChat人脸识别Payment"
              : e.type == 5
              ? "IC卡Payment"
              : e.type == 8
              ? "BalancePayment"
              : e.type == 6
              ? "AlipayPayment"
              : ""
        },
        {
          label: "Transaction Time",
          prop: "orderTime",
          width: 160,
          formatter: e =>
            this.getDeta(+new Date(e.orderTime.replace(/T/g, " ")))
        }
      ],
      tablePage: { limit: 10, page: 1, total: 0 }
    };
  },
  components: {},
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      this.tablePage.offset = this.tablePage.page;
      let param = {
        ...this.tablePage,
        ...this.searchData2,
        ...this.searchData
      };
      let res = await this.api.getbonus(param);
      if (res) {
        this.tableData = res.data.list;
        this.tablePage.total = res.data.total;
      }
      let resin = await this.api.bonusin();
      let resout = await this.api.bonusout();
      if (resin) {
        this.MoneyData.insum = resin.data.inSum;
      }
      if (resout) {
        this.MoneyData.outsum =
          resout.data.outSum == 0 ? "0" : resout.data.outSum;
        console.log(this.MoneyData);
      }
    },
    //日期变更触发
    dateChange(e) {
      this.init();
    },
    //Search
    elFormSubmit() {
      console.log("22");
    },
    searchFromReset2() {
      this.searchData2 = {
        orderId: "",
        name: "",
        orderType: "",
        etime: ""
      };
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          // if (j === 'connectedStatus') {
          //     return v[j] == 1 ? "Online" : "Offline"
          // } else if (j === 'status') {
          //     return v[j] == 1 ? "正常" : v[j] == 2 ? "设备维护中" : "Nonactivated"
          // } else {
          return v[j];
          // }
        })
      );
    }
  }
};
</script>
<style scoped lang="scss">
.mbox {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  min-width: 200px;
  p:first-child {
    margin-bottom: 20px;
  }
}
.bg_1 {
  background-color: rgba(0, 153, 204, 1);
}
.bg_2 {
  background-color: rgba(102, 102, 204, 1);
}
</style>
